<!DOCTYPE html>
<html lang="en">
    <html lang="zh-CN" xml:lang="zh-CN">
        <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta charset="UTF-8" />
        <title>小米商城 - 小米MIX 3、小米8、红米6 Pro、小米电视官方网站</title>
        <meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX 3、小米8、小米Note 3，红米手机系列红米5 Plus、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />
        <meta name="keywords" content="小米,小米8,小米Note3,红米5Plus,小米MIX3,小米商城" />
        <meta name="viewport" content="width=1226" />
        <meta http-equiv="x-dns-prefetch-control" content="on">
        <link rel="icon" type="text/css" href="./img/favicon.ico">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="font/iconfont.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/font.css">
        <script src="./js/jquery2.0.0.js"></script>
        <script src="./js/index.js"></script>    
    </head>        
    <body>
        <header class="header">
            <div class="bx">
                <div class="nav-left">
                    <ul>
                        <li><a href="#">小米商城</a> </li>
                        <li><a href="#">MIUI</a> </li>
                        <li><a href="#">IoT</a> </li>
                        <li><a href="#">云服务</a> </li>
                        <li><a href="#">金融</a> </li>
                        <li><a href="#">有品</a> </li>
                        <li><a href="#">小爱开放平台</a> </li>
                        <li><a href="#">政企服务</a> </li>
                        <li><a href="#">资质证照</a> </li>
                        <li><a href="#">协议规则</a> </li>
                        <li class="erm"><a href="#">下载app</a> 
                            <div class="erweima">
                                <img src="img/ewm.png" alt=""><p>小米APP</p></div>
                            </li>
                            <li><a href="#">Select Region</a></li>
                        </ul>
                    </div>
                    <div class="nav-right">
                        <ul>
                            <li><a href="login.html">登录</a> </li>
                        <li><a href="regist.html">注册</a> </li>
                        <li><a href="#">消息通知</a></li>
                        <li><a href="car.html" class="active">购物车</a>
                            <div class="car">还没有购物车，赶紧选购吧！</div></li>
                        </ul>
                    </div>
                </div>
            </header>
            <nav class="bx nav"><img src="./img/1.png" alt="">
                <ul>
                    <li class="one">小米手机 <div class="lst"><a href="#"><img src="./img/13.png" alt="" srcset=""></a></div></li>
                    <li class="tow">红米<div class="lst1"><a href="#"><img src="./img/14.png" alt="" srcset=""></a></div></li>
                    <li class="three">电视<div class="lst2"><a href="#"><img src="./img/15.png" alt="" srcset=""></a></div></li>
                    <li class="four">笔记本<div class="lst3"><a href="#"><img src="./img/16.png" alt="" srcset=""></a></div></li>
                    <li class="five">家电<div class="lst4"><a href="#"><img src="./img/17.png" alt="" srcset=""></a></div></li>
                    <li class="six">新品<div class="lst5"><a href="#"><img src="./img/18.png" alt="" srcset=""></a></div></li>
                    <li class="seven">路由器<div class="lst6"><a href="#"><img src="./img/19.png" alt="" srcset=""></a></div></li>
                    <li class="egit">智能硬件<div class="lst7"><a href="#"><img src="./img/20.png" alt="" srcset=""></a></div></li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
                <div class="search">
                    <input type="text" id="text">
                    <div class="ser iconfont">&#xe619;</div>
                    <ul id="ul"></ul>
                </div>
            </nav>
            <div class="content bx">
                <div class="conleft">
                   <ul>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                   </ul>
                </div>
                <div class="conright">
                        <div class="fr">
                             <ul> 
                            </ul>
                        </div>
                    <ul id="img">
                        <li><a href="#"><img src="./img/21.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/22.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/23.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/24.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/25.jpg" alt=""></a></li>
                    </ul>
                    <div class="lift"><</div>
                    <div class="lirh">></div>
                    <div id="nav1">
                        <ul>
                            <li class="select"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="cont bx">
                <div class="icom-left">
                    <ul>
                        <li><a href="#" class="iconfont">&#xe641;</a><i>选购手机</i></li>
                        <li><a href="#" class="iconfont">&#xe622;</a><i>企业团购</i></li>
                        <li><a href="#" class="iconfont">&#xe748;</a><i>F码通道</i></li>
                        <li><a href="#" class="iconfont">&#xe748;</a><i>米粉卡</i></li>
                        <li><a href="#" class="iconfont">&#xe641;</a><i>以旧换新</i></li>
                        <li><a href="#" class="iconfont">&#xe639;</a><i>话费充值</i></li>
                    </ul>
                </div>
                <div class="icom-right">
                    <ul>
                        <li><img src="./img/26.jpg"></li>
                        <li><img src="./img/27.jpg"></li>
                        <li><img src="./img/28.jpg"></li>
                    </ul>
                </div>
            </div>
            <div class="list bx">
              <h2 id="hou">></h2>  <h2 id="qian"><</h2>
                <div class="time">
                    <img src="./img/29.png" alt="" srcset="">
                    <p>距离活动结束还有</p>
                    <div class="tim">
                    <span class="spa">00</span><i>:</i>
                    <span class="spa">00</span><i>:</i>
                    <span class="spa">00</span></div>
                </div>
                <ul></ul> 
                <div class="bg bx"><img src="./img/30.jpg" alt="">
                <ul id="gg">
                </ul>
                <div class="hg bx"><img src="./img/31.jpg" alt="" srcset="">
                    <div class="fg">
                    <div id="span4">热门2</div>
                    <div id="span5">热门1</div>
                    <div id="span6">热门</div></div>
                <ul id="mm"></ul>
                </div>  <a id="a1" href="list.html">更多详情</a>
            </div>
        
            </div>
        </body>
        <script>
          $(function(){
              //热门取数据 翻页
             $("#span4").on("mouseover",function(){
                $.get("http://47.104.244.134:8080/goodsbytid.do", {"tid":13,"page":2,"limit":8},function(data){
                    var data = data.data;
                    var str = "";
                   for(var i = 0; i < data.length; i++){
                       str += "<li><img src='"+data[i].picurl+"'/><p>"+data[i].price+"</p></li>"
                }
                  $(".hg ul").html(str)
                });
             })
             $("#span5").on("mouseover",function(){
                $.get("http://47.104.244.134:8080/goodsbytid.do", {"tid":13,"page":1,"limit":8},function(data){
                    var data = data.data;
                    var str = "";
                   for(var i = 0; i < data.length; i++){
                       str += "<li><img src='"+data[i].picurl+"'/><p>"+data[i].price+"</p></li>"
                }
                  $(".hg ul").html(str)
                });
             })
             $("#span6").on("mouseover",function(){
                $.get("http://47.104.244.134:8080/goodsbytid.do", {"tid":13,"page":3,"limit":8},function(data){
                    var data = data.data;
                    var str = "";
                   for(var i = 0; i < data.length; i++){
                       str += "<li><img src='"+data[i].picurl+"'/><p>"+data[i].price+"</p></li>"
                }
                  $(".hg ul").html(str)
                });
             })
             //获取搜素框的数据
    var ul = document.getElementById("ul");
    $("#text").on("keyup", function () {
        var val = $("#text").val();
        $.ajax({
            type: "get",
            url: "https://search.mi.com/search/expand?keyword="+val+"&jsonpcallback=?",
            async: true,
            dataType: "jsonp",
             success:xmsearch
        });
    })
     function xmsearch(data) {
         var str = "";
        for(var i in data){
          str+="<li>"+data[i].Key+"</li>"
        }
         ul.innerHTML = str;
       }     
          })
        </script>
        </html>